<template>
  <div v-loading="loading" class="tab-container">
    <div v-if="subPageFlag==false">
      <!-- 查询与新增 -->
      <el-form ref="queryform" :model="queryform" :inline="true">
        <el-form-item>
          <el-select @change="handleQuery()" v-model="queryform.environment_id" placeholder="请选择环境" clearable>
            <el-option v-for="item in environments" :key="item.id" :label="isSupper()?item.env_name+'【'+item.space_name+'】':item.env_name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input @input="handleQuery()" placeholder="请输入项目名称" v-model="queryform.queryName" class="wl-input">
            <el-button @click="handleQuery()" slot="append" icon="el-icon-search" class="wl-search" />
          </el-input>
          <router-link :to="{name:'CreateProject', params:{flag:'create', context: queryContent()}}" class="wl-append">
            <el-button v-if="enableCreate" type="primary" icon="el-icon-edit">新建项目</el-button>
          </router-link>
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-table :data="list" :header-cell-style="{background:'#f4f4f5'}" class="wl-table">
        <el-table-column prop="id" :show-overflow-tooltip="true" label="ID" min-width="50" />
        <el-table-column prop="name" :show-overflow-tooltip="true" label="名称" min-width="180" />
        <el-table-column prop="environment_name" :show-overflow-tooltip="true" label="环境" min-width="100" />
        <el-table-column prop="space_name" :show-overflow-tooltip="true" label="空间" min-width="100" />
        <el-table-column prop="username" :show-overflow-tooltip="true" label="创建者" min-width="100" />
        <el-table-column prop="status" :show-overflow-tooltip="true" label="状态" min-width="60">
          <template slot-scope="scope"><span>{{getStatusDesc(scope.row.status)}}</span></template>
        </el-table-column>
        <el-table-column prop="created_at" :show-overflow-tooltip="true" label="创建时间" min-width="135" />
        <el-table-column prop="operate" label="操作" min-width="355">
          <template slot-scope="scope">
            <el-button v-if="scope.row.enable_update" type="text">
              <router-link :to="{name:'MemberProject', params:{id:scope.row.id, context: queryContent()}}">
                <svg-icon icon-class="peoples" class="wl-icon" />成员管理</router-link>
            </el-button>
            <el-button v-if="scope.row.enable_update" type="text">
              <router-link :to="{name:'UpdateProject', params:{flag:'update', data:scope.row, context: queryContent()}}">
                <i class="el-icon-edit wl-icon" />编辑</router-link>
            </el-button>
            <el-button v-if="scope.row.enable_update" @click="handleCopy(scope.row)" type="text" icon="el-icon-document-copy">复制</el-button>
            <el-button v-if="scope.row.enable_view" type="text">
              <router-link :to="{name:'ViewProject', params:{flag:'view', data:scope.row, context: queryContent()}}">
                <i class="el-icon-view wl-icon" />查看</router-link>
            </el-button>
            <el-button v-if="scope.row.enable_update" type="text">
              <router-link :to="{name:'CheckProject', params:{id:scope.row.id, name:scope.row.name, context: queryContent()}}">
                <svg-icon icon-class="bug" class="wl-icon" />检测</router-link>
            </el-button>
            <el-button v-if="scope.row.enable_delete" @click="handleDelete(scope.row)" type="text" icon="el-icon-delete" class="wl-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="wl-pagination" background
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100, 150, 200]"
        :page-size="pageSize"
        :total="count">
      </el-pagination>
    </div>

    <!-- 子菜单路由 -->
    <router-view /> 
  </div>
</template>

<script>
import { getProjects, copyProject, deleteProject } from '@/api/project'
import { getEnvironment } from '@/api/env'

export default {
  name: 'WalleProject',
  data() {
    return {
      loading: false,
      subPageFlag: false, //当打开子菜单时，当前页内屏蔽
      queryform: {
        queryName: '',
        environment_id: ''
      },
      environments: [],
      enableCreate: false,
      list: [],
      count: 0,
      pageSize: 10,
      currentPage: 1
    }
  },
  mounted() {
    if (this.$route.name === "WalleProject") {
      const params = this.$route.params
      this.subPageFlag = false
      if (params && params.currentPage) {
        this.currentPage = params.currentPage
        this.pageSize = params.pageSize
        this.queryform.queryName = params.queryName
        this.queryform.environment_id = params.environment_id
      }
      this.getEnviroments()
      this.getProjects()
    } else {
      this.subPageFlag = true
    }
  },
  methods: {
    isSupper: function() { // 判断是超级用户
      const user = this.$store.getters.user
      return user.role === 'SUPER'
    },
    queryContent() {
      return {
        currentPage: this.currentPage,
        pageSize: this.pageSize, 
        queryName: this.queryform.queryName, 
        environment_id: this.queryform.environment_id
      }
    },
    handleQuery(event) { // 查询
      this.getProjects()
    },
    handleCopy(row) {  // 复制
      this.$confirm('确定复制【' + row.name + '】吗? ', '提示', {type:'info', confirmButtonText:'确定', cancelButtonText:'取消'}).then(() => {
        this.loading = true
        copyProject(row.id).then(response => {
          this.loading = false
          if (!response.data || response.data.code !== 0) {
            this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
            return
          }
          this.getProjects()
          this.$message({ type: 'success', message: '复制成功！' })
        }).catch(error => {
          this.loading = false
          this.$message({ type: 'error', message: '复制失败!' });
        })
      }).catch(error => {})
    },
    handleDelete(row) { // 删除
      this.$confirm('确定删除【' + row.name + '】吗? ', '提示', {type:'warning', confirmButtonText:'确定', cancelButtonText:'取消'}).then(() => {
        this.loading = true
        deleteProject(row.id).then(response => {
          this.loading = false
          if (!response.data || response.data.code !== 0) {
            this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
            return
          }
          this.getProjects()
          this.$message({ type: 'success', message: '删除成功！' })
        }).catch(error => {
          this.loading = false
          this.$message({ type: 'error', message: '删除失败!' });
        })
      }).catch(error => {})
    },
    handleSizeChange(pageSize) { // 设置分页大小事件
      this.pageSize = pageSize
      this.getProjects()
    },
    handleCurrentChange(pageno) { // 处理分页事件
      this.currentPage = pageno
      this.getProjects()
    },
    getEnviroments() {
      getEnvironment().then(response => {
        if (!response.data || response.data.code !== 0) {
          this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
          return
        }
        let data = response.data.data
        this.environments = data.list
      }).catch(error => {
        this.$message({ type:'error', message:'请求异常！'})
        console.log(error)
      })
    },
    getProjects() { // 获取项目列表
      this.loading = true
      getProjects(this.pageSize, this.currentPage, this.queryform.queryName.trim(), this.queryform.environment_id).then(response => {
        this.loading = false
        if (!response.data || response.data.code !== 0) {
          this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
          return
        }
        let data = response.data.data
        this.enableCreate = data.enable_create
        this.count = data.count
        this.list = data.list
        if (this.count > 0 && this.list.length==0) { // 调整PageNo
          this.currentPage = Math.ceil(this.count / this.pageSize)
          this.getProjects()
        }
      }).catch(error => {
        this.loading = false
        this.$message({ type:'error', message:'请求异常！'})
        console.log(error)
      })
    },
    getStatusDesc(status) { // 项目状态
      switch(status) {
        case 0: return '无效'
        case 1: return '正常'
        default: return status
      }
    }
  }
}
</script>

<style scoped>
  .tab-container {
    margin: 20px;
  }
  .wl-table {
    width:100%;
    margin-top: 10px;
  }
  .wl-icon {
    margin-right: 5px;
  }
  .wl-operate {
    overflow: hidden;
  }
  .wl-input {
    width: 250px;
  }
  .wl-form-input {
    width: 360px;
  }
  .wl-search {
    background:#f5f7fa;
  }
  .wl-append {
    margin-left: 15px;
  }
  .wl-delete {
    color: #f56c6c;
  }
  .wl-pagination {
    margin-top:10px;
  }
</style>